<template>
  <div class="form">
    <div>
      <el-button @click="picker">获取文件夹</el-button>
      <!-- 选定文件夹后显示操作按钮 -->
    </div>

    <div>
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        lazy
        :load="loadNode"
      />
    </div>
    <div>
      <div>{{ select.type }}</div>

      <el-input
        v-if="textarea.type === 'text'"
        v-model="textarea.value"
        type="textarea"
        placeholder="Please input"
        :autosize="{ minRows: 10 }"
      />
      <div v-else-if="textarea.type === 'image'">
        <img :src="textarea.value" />
      </div>

      <template v-if="select.type === 'directory'">
        <el-button @click="createFile">新建文件</el-button>
        <el-button @click="createDir">新建目录</el-button>
      </template>
      <template v-else-if="textarea.type == 'text'">
        <el-button @click="writable">写入</el-button>
      </template>

      <template v-if="select.type">
        <el-button @click="removeFile">删除</el-button>
      </template>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import Tree from './Tree';
import FileSystemAccess from './FileSystemAccess';

// 输入框过内容
const textarea = reactive({
  type: null,
  value: null,
});

const { defaultProps, data, tree, select, handleNodeClick, loadNode } =
  Tree(textarea);

const { picker, createFile, createDir, writable, removeFile } =
  FileSystemAccess(data, select, tree, textarea);
</script>
<style lang="scss" scoped>
.form {
  display: grid;
  grid-template-columns: 300px auto;
  gap: 10px;

  > div {
    &:nth-child(1) {
      min-height: 100px;
      grid-area: 1/1/2/3;
    }

    &:nth-child(2) {
      :deep(.file) {
        color: var(--el-color-primary);
      }
    }

    &:nth-child(3) {
      min-height: 400px;
    }
  }
}
</style>
